<template>
    <div class="studentHome">
        <el-row style="height: 100%">
            <!--    左侧导航栏   -->
            <el-col :span="4" class="navigation">
                <el-menu
                        default-active="/studenthome/"
                        class="el-menu-vertical-demo"
                        :router = "true"
                        background-color="#545c64"
                        text-color="#fff"
                        active-text-color="#ffd04b">
                    <el-menu-item index="/studenthome/">
                        <i class="el-icon-reading"></i>
                        <span slot="title">图书查询与借阅</span>
                    </el-menu-item>
                    <el-menu-item index="/studenthome/records">
                        <i class="el-icon-document"></i>
                        <span slot="title">历史借阅记录与还书</span>
                    </el-menu-item>
                    <el-menu-item index="/studenthome/information">
                        <i class="el-icon-postcard"></i>
                        <span slot="title">我的信息</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <!--    右侧界面    -->
            <el-col :span=20 class="charts">
                <router-view></router-view>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "UserHome",
        mounted() {
            //校验是否登录,未登录不得进入此页面
            if(!this.$store.state.loginState || this.$store.state.user.user_role !== 0){
                this.$router.replace({path:'/'})
            }
        }
    }
</script>

<style scoped>
    .studentHome{
        height: 100%;
    }
    .navigation{
        height:100%;
        background-color:#545c64;
    }
    .charts{
        height: 100%;
    }
</style>